<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="活动名称" prop="name">
        <el-col :span="12">
          <el-input placeholder="输入活动名称" v-model="dataForm.name" maxlength="16" show-word-limit></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="是否开启" prop="added">
        <el-switch v-model="dataForm.added" inactive-color="#B9B9B9">
        </el-switch>
      </el-form-item>
      <div class="flex">
        <el-form-item label="优惠方式" prop="money">
          <span class="wt80">充值</span>
          <el-input v-model.trim="dataForm.money" @input="limitInput($event,'money')" style="width: 120px;"></el-input>
          <span class="ml10">元</span>
        </el-form-item>
        <el-form-item label-width="0px" prop="append">
          <span class="wt80">，送</span>
          <el-input v-model.trim="dataForm.append" @input="limitInput($event,'append')" style="width: 120px;"></el-input>
          <span class="ml10">元</span>
        </el-form-item>
      </div>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '0',
        name: '',
        money: null,
        append: null,
        added: 0
      },
      dataRule: {
        name: [{
          required: true,
          message: '活动名称不能为空',
          trigger: 'blur'
        }],
        added: [{
          required: true,
          message: '请选择是否开启',
          trigger: 'blur'
        }],
        money: [{
          required: true,
          message: '充值金额不能为空',
          trigger: 'blur'
        }],
        append: [{
          required: true,
          message: '赠送金额不能为空',
          trigger: 'blur'
        }]
      }
    }
  },

  methods: {
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      if (id) {
        seviceApi.getRefillnfo(id).then(res => {
          if (res && res.data.code == 200) {
            res.data.data.added = res.data.data.added != 0
            this.dataForm = res.data.data
          }
        })
      }
    },
    limitInput (value, name) {
      this.dataForm[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    // 提交
    dataFormSubmit () {
      this.dataForm.added = this.dataForm.added == false ? '0' : '1'
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.dataForm.id != 0) {
            seviceApi.putRefillCardUpdate(this.dataForm).then(res => {
              if (res && res.data.code == 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.visible = false
                this.$emit('updataList', 1)
              }
            })
          } else {
            delete this.dataForm.id
            seviceApi.postRefillCardSave(this.dataForm).then(res => {
              if (res && res.data.code == 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.visible = false
                this.$emit('updataList', 1)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style>
.el-flex {
  display: flex;
}

.mt30 {
  margin-top: 30px;
}

.wt80 {
  width: 80px;
}

.ml10 {
  margin-left: 10px;
}
</style>
